/* eslint-disable */
const colorData = [
	[23, 12, 212],
	[22, 19, 212],
	[22, 25, 214],
	[22, 32, 215],
	[19, 41, 215],
	[21, 47, 218],
	[20, 53, 218],
	[18, 60, 220],
	[18, 69, 222],
	[18, 76, 222],
	[16, 83, 224],
	[14, 91, 223],
	[14, 97, 227],
	[14, 104, 226],
	[12, 113, 229],
	[12, 120, 229],
	[11, 126, 232],
	[10, 132, 231],
	[10, 140, 234],
	[10, 146, 234],
	[12, 154, 238],
	[9, 162, 238],
	[7, 168, 238],
	[7, 175, 240],
	[6, 182, 241],
	[5, 191, 242],
	[5, 197, 244],
	[5, 204, 243],
	[4, 212, 248],
	[4, 219, 248],
	[0, 226, 248],
	[0, 233, 248],
	[0, 241, 252],
	[0, 246, 253],
	[0, 249, 251],
	[0, 251, 246],
	[0, 247, 239],
	[0, 243, 233],
	[2, 240, 225],
	[0, 236, 218],
	[0, 232, 210],
	[1, 229, 202],
	[0, 224, 197],
	[0, 221, 188],
	[0, 219, 184],
	[0, 214, 176],
	[1, 212, 167],
	[0, 208, 159],
	[0, 204, 153],
	[0, 201, 147],
	[0, 198, 141],
	[0, 194, 133],
	[0, 190, 126],
	[0, 187, 119],
	[1, 182, 111],
	[0, 179, 105],
	[0, 176, 96],
	[0, 172, 88],
	[1, 169, 84],
	[0, 166, 76],
	[0, 161, 68],
	[0, 158, 61],
	[0, 154, 52],
	[0, 149, 45],
	[0, 147, 40],
	[0, 144, 33],
	[0, 141, 25],
	[0, 138, 17],
	[0, 134, 11],
	[0, 130, 6],
	[2, 129, 0],
	[5, 130, 2],
	[8, 132, 2],
	[14, 133, 3],
	[19, 136, 6],
	[22, 138, 5],
	[25, 141, 8],
	[31, 143, 9],
	[35, 147, 13],
	[38, 146, 11],
	[42, 150, 13],
	[49, 151, 15],
	[52, 154, 18],
	[58, 156, 19],
	[61, 158, 19],
	[64, 161, 22],
	[69, 162, 22],
	[73, 164, 24],
	[78, 167, 25],
	[83, 168, 25],
	[88, 171, 29],
	[91, 173, 27],
	[96, 175, 30],
	[99, 177, 32],
	[104, 179, 35],
	[108, 182, 35],
	[112, 184, 36],
	[118, 186, 37],
	[122, 188, 39],
	[126, 190, 41],
	[130, 193, 42],
	[134, 194, 44],
	[138, 197, 43],
	[143, 199, 46],
	[146, 201, 48],
	[151, 202, 47],
	[154, 205, 48],
	[157, 207, 46],
	[160, 208, 46],
	[164, 209, 44],
	[165, 211, 42],
	[170, 212, 40],
	[171, 214, 39],
	[175, 216, 36],
	[177, 216, 37],
	[180, 218, 37],
	[183, 219, 35],
	[186, 221, 33],
	[189, 222, 31],
	[192, 223, 31],
	[194, 224, 28],
	[198, 226, 27],
	[200, 227, 26],
	[204, 229, 24],
	[205, 230, 24],
	[209, 231, 22],
	[210, 233, 19],
	[215, 234, 18],
	[216, 236, 17],
	[221, 237, 16],
	[222, 238, 15],
	[226, 239, 12],
	[229, 242, 12],
	[231, 243, 11],
	[235, 245, 8],
	[237, 246, 9],
	[239, 246, 8],
	[243, 249, 5],
	[245, 249, 2],
	[248, 250, 0],
	[250, 252, 1],
	[253, 252, 1],
	[255, 252, 1],
	[255, 248, 0],
	[255, 247, 0],
	[254, 244, 0],
	[254, 242, 0],
	[255, 240, 1],
	[254, 237, 1],
	[255, 235, 0],
	[255, 231, 1],
	[253, 229, 0],
	[254, 227, 0],
	[255, 224, 1],
	[255, 223, 0],
	[255, 219, 0],
	[255, 216, 0],
	[255, 214, 0],
	[255, 211, 0],
	[255, 209, 1],
	[255, 207, 0],
	[255, 203, 0],
	[254, 201, 0],
	[255, 198, 0],
	[255, 197, 1],
	[254, 194, 0],
	[254, 191, 0],
	[255, 190, 2],
	[254, 186, 0],
	[255, 182, 0],
	[254, 181, 1],
	[254, 179, 0],
	[254, 177, 0],
	[255, 174, 0],
	[255, 171, 0],
	[254, 167, 0],
	[255, 166, 0],
	[255, 163, 0],
	[253, 159, 0],
	[255, 154, 0],
	[255, 150, 0],
	[255, 145, 0],
	[255, 141, 0],
	[254, 136, 0],
	[254, 132, 0],
	[255, 126, 0],
	[255, 122, 1],
	[255, 119, 1],
	[255, 114, 0],
	[255, 110, 1],
	[255, 104, 1],
	[255, 98, 1],
	[255, 95, 1],
	[254, 89, 0],
	[254, 86, 0],
	[255, 80, 1],
	[255, 75, 0],
	[254, 70, 0],
	[255, 66, 0],
	[254, 62, 0],
	[254, 58, 0],
	[255, 52, 1],
	[254, 48, 0],
	[254, 43, 0],
	[255, 39, 0],
	[254, 34, 0],
	[255, 30, 0],
	[255, 23, 0],
	[255, 20, 0],
	[255, 15, 0],
	[255, 11, 0],
	[255, 6, 0],
	[254, 2, 0],
	[253, 1, 0],
	[248, 0, 0],
	[246, 1, 0],
	[242, 0, 0],
	[238, 0, 0],
	[236, 0, 0],
	[232, 0, 0],
	[230, 0, 0],
	[226, 0, 1],
	[223, 1, 0],
	[219, 1, 0],
	[216, 0, 1],
	[212, 0, 1],
	[210, 0, 1],
	[206, 0, 0],
	[204, 0, 1],
	[200, 0, 0],
	[196, 1, 0],
	[194, 0, 0],
	[190, 1, 0],
	[186, 0, 1],
	[184, 0, 0],
	[180, 0, 0],
	[178, 0, 0],
	[174, 0, 0],
	[170, 0, 0],
	[166, 0, 0],
	[164, 0, 0],
	[162, 0, 0],
	[158, 0, 0],
	[153, 0, 0],
	[152, 0, 1],
	[149, 1, 1],
];

// Vertex shader program
const VSHADER_SOURCE =
	"attribute vec4 a_Position;\n" +
	"attribute vec4 a_Color;\n" +
	"varying vec4 v_Color;\n" +
	"void main() {\n" +
	"  gl_Position = a_Position;\n" +
	"  v_Color = a_Color;\n" +
	"}\n";

// Fragment shader program
const FSHADER_SOURCE =
	"#ifdef GL_ES\n" +
	"precision mediump float;\n" +
	"#endif\n" +
	"varying vec4 v_Color;\n" +
	"void main() {\n" +
	"  gl_FragColor = v_Color;\n" +
	"}\n";

//清除色配置
const CLEARCOLOR = [0.0, 0.0, 0.0, 1.0];

export default class RadarSailing {
	constructor(canvas, alpha) {
		this.gl = null;
		this.alpha = alpha;
		this.centerPt = [0, 0]; // 当前经纬度位置
		this.playIndex = 0; // 播放索引
		this.playTimer = null; // 播放定时器
		this.colorsMap = new Map();
		this.breaks = 1;
		this.min = 0;
		this.max = 1;
		this.hisData = {
			centerLon: 0,
			centerLat: 0,
			element: null,
			linesReverse: [],
		};
		this.lineInfo = {
			positionAry: [],
			colorAry: [],
			indicesAry: [],
			index: 0,
		};
		this.radarDPI = 7.5;
		this.playIsShow = true;
		this.dateIndex = 0;
		this.initGL(canvas); //初始化webgl
		this._setColorMap();
	}

	//初始化GL
	initGL(canvas) {
		// Get the rendering context for WebGL
		var gl = getWebGLContext(canvas);
		this.gl = gl;
		if (!gl) {
			console.log("Failed to get the rendering context for WebGL");
			return;
		}

		// Initialize shaders
		if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
			console.log("Failed to intialize shaders.");
			return;
		}

		// Set the vertex coordinates and color
		var n = this.initVertexBuffers(gl);
		if (n < 0) {
			console.log("Failed to set the vertex information");
			return;
		}

		// Set clear color and enable hidden surface removal
		gl.clearColor(...CLEARCOLOR);
	}

	//gl绘制
	initVertexBuffers(gl, verti, ind) {
		// Clear color buffer
		gl.clear(gl.COLOR_BUFFER_BIT);

		//顶点信息数组顺序：x,y,r,g,b,a 五个一组
		var verticesColors = new Float32Array(verti);

		// Indices of the vertices
		var indices = new Uint32Array(ind);

		// Create a buffer object
		var vertexColorBuffer = gl.createBuffer();
		var indexBuffer = gl.createBuffer();
		if (!vertexColorBuffer || !indexBuffer) {
			return -1;
		}

		// Write the vertex coordinates and color to the buffer object
		gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

		var FSIZE = verticesColors.BYTES_PER_ELEMENT;
		// Assign the buffer object to a_Position and enable the assignment
		var a_Position = gl.getAttribLocation(gl.program, "a_Position");
		if (a_Position < 0) {
			console.log("Failed to get the storage location of a_Position");
			return -1;
		}
		gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
		gl.enableVertexAttribArray(a_Position);
		// Assign the buffer object to a_Color and enable the assignment
		var a_Color = gl.getAttribLocation(gl.program, "a_Color");
		if (a_Color < 0) {
			console.log("Failed to get the storage location of a_Color");
			return -1;
		}
		gl.vertexAttribPointer(
			a_Color,
			3,
			gl.FLOAT,
			false,
			FSIZE * 5,
			FSIZE * 2
		);
		gl.enableVertexAttribArray(a_Color);

		// Write the indices to the buffer object
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

		// Draw the cube
		const n = indices.length;
		gl.getExtension("OES_element_index_uint");
		gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_INT, 0);
	}

	_setColorMap() {
		for (let i = 0; i < colorData.length; i++) {
			let color = [];
			for (let j = 0; j < colorData[i].length; j++) {
				color.push(colorData[i][j] / 255);
			}
			this.colorsMap.set(i, color);
		}
	}

	// 配置雷达显示颜色
	_setRadarColor(valueRadar) {
		this.min = valueRadar[0];
		this.max = valueRadar[valueRadar.length - 1];
		this.breaks = this.getBreaks(this.max, this.min, colorData.length);
	}

	// 加载数据完毕后刷新平扫信息
	doLoadData(data, valueRadar) {
		this.playIndex = 0;
		this.isLoadData = false;
		this.hisData.centerLon = data.centerLon;
		this.hisData.centerLat = data.centerLat;
		this.hisData.element = data.element;
		this.hisData.linesReverse = data.linesReverse;

		if (!data.element || data.linesReverse.length < 1) {
			return;
		}
		this._setRadarColor(valueRadar);
		const len = data.linesReverse.length - 1;
		this.startPlayTimer(len);
		this.isLoadData = true;
	}

	// 播放雷达扫描图
	startPlayTimer(len) {
		this.dateIndex = 0;
		this.playIsShow = true;
		this.lineInfo = {
			positionAry: [],
			colorAry: [],
			indicesAry: [],
			index: 0,
		};
		let ts = new Date();
		this.playTimer = setInterval(() => {
			const te = new Date();
			if (te - ts > 8 && this.playIsShow) {
				ts = te;
				this.playIsShow = false;
				this.dateIndex++;
				this._doRenderRadar(this.dateIndex);
				if (this.dateIndex >= len) {
					clearInterval(this.playTimer);
				}
			}
		}, 5);
	}

	// 雷达扫描图
	_doRenderRadar(len) {
		this._drawSailRadarPrimi(len - 1, this.lineInfo);
		if (this.lineInfo.positionAry.length > 0 && this.lineInfo.index !== 0) {
			this._renderGeo(
				this.lineInfo.positionAry,
				this.lineInfo.colorAry,
				this.lineInfo.indicesAry,
				"radar"
			);
			//逐帧绘制
			// this.lineInfo = {
			// 	positionAry: [],
			// 	colorAry: [],
			// 	indicesAry: [],
			// 	index: 0,
			// };
		}
		this.playIsShow = true;
	}

	//清除雷达图
	clearRader() {
		this.stopPlayTimer();
		const gl = this.gl;
		gl.clear(gl.COLOR_BUFFER_BIT);
	}

	// 两点数据获取
	_drawSailRadarPrimi(curIndex, lineInfo) {
		const data = this.hisData.linesReverse;

		const index1 = curIndex;
		const index2 = curIndex + 1;

		if (index1 >= data.length || index2 >= data.length) {
			return false;
		}

		const len = data[0].data.length - 1; // 默认展示6公里
		const degrees1 = data[index1].deg;
		const degrees2 = data[index2].deg;
		const elevation1 = 0;
		const elevation2 = 0;

		for (let j = 1; j < len; j++) {
			if (Math.abs(degrees1 - degrees2) >= 10) {
				continue;
			}

			let j1 = j;
			let j2 = j + 1;

			let value1 = data[index1].data[j1].value;
			let value2 = data[index1].data[j2].value;
			let value3 = data[index2].data[j1].value;
			let value4 = data[index2].data[j2].value;

			if (value1 < 0) {
				value1 = 0;
			}
			if (value2 < 0) {
				value2 = 0;
			}

			if (!value3) {
				return;
			}

			if (!value4) {
				return;
			}

			// 计算颜色
			const cl1 = this.getColor(
				this.breaks,
				this.colorsMap,
				Number(value1)
			);
			const cl2 = this.getColor(
				this.breaks,
				this.colorsMap,
				Number(value2)
			);
			const cl3 = this.getColor(
				this.breaks,
				this.colorsMap,
				Number(value3)
			);
			const cl4 = this.getColor(
				this.breaks,
				this.colorsMap,
				Number(value4)
			);

			const lon1 = 0;
			const lat1 = 0;
			// const lon1 = this.hisData.centerLon;
			// const lat1 = this.hisData.centerLat;

			const r1 = j1 / len;
			const xy1 = getTude(lon1, lat1, degrees1, r1);

			const r2 = j1 / len;
			const xy2 = getTude(lon1, lat1, degrees2, r2);

			const r3 = j2 / len;
			const xy3 = getTude(lon1, lat1, degrees1, r3);

			const r4 = j2 / len;
			const xy4 = getTude(lon1, lat1, degrees2, r4);

			// const h1 = Math.sin(elevation1) * r1 * 300;
			// const h3 = Math.sin(elevation1) * r3 * 300;
			// const h2 = Math.sin(elevation2) * r2 * 300;
			// const h4 = Math.sin(elevation2) * r4 * 300;

			lineInfo.positionAry.push(xy1.x, xy1.y);
			lineInfo.positionAry.push(cl1[0], cl1[1], cl1[2]);
			lineInfo.positionAry.push(xy3.x, xy3.y);
			lineInfo.positionAry.push(cl2[0], cl2[1], cl2[2]);
			lineInfo.positionAry.push(xy2.x, xy2.y);
			lineInfo.positionAry.push(cl3[0], cl3[1], cl3[2]);
			lineInfo.positionAry.push(xy4.x, xy4.y);
			lineInfo.positionAry.push(cl4[0], cl4[1], cl4[2]);

			const index = lineInfo.index * 4;
			lineInfo.indicesAry.push(index + 0, index + 3, index + 1);
			lineInfo.indicesAry.push(index + 0, index + 2, index + 3);
			lineInfo.index++;
		}

		//圆点坐标：(x0,y0) 角度：a0 半径：r 则圆上任一点为：（x1,y1）

		// function getTude (lon, lat, dis, theta) {
		// 	const Ea = 6378137.0//赤道半径
		// 	const Eb = 6356725.0//极半径
		// 	const PI = Math.PI
		// 	let dx = dis * 1.0 * Math.sin(theta)
		// 	let dy = dis * 1.0 * Math.cos(theta)
		// 	let ec = Eb + (Ea - Eb) * (90.0 - lat) / 90.0
		// 	let ed = ec * Math.cos(lat * PI / 180.0)
		// 	let newLon = (dx / ed + lon * PI / 180.0) * 180.0 / PI
		// 	let newLat = (dy / ec + lat * PI / 180.0) * 180.0 / PI
		// 	let data = {
		// 		'x': Number(newLon),
		// 		'y': Number(newLat)
		// 	}
		// 	return data
		// }

		function getTude(x0, y0, ao, r) {
			let x1 = x0 + Math.sin((ao * Math.PI) / 180) * r;
			let y1 = y0 + Math.cos((ao * Math.PI) / 180) * r;
			let data = {
				x: Number(x1),
				y: Number(y1),
			};
			return data;
		}

		// return true
	}

	_renderGeo(positionAry, colorAry, indiceAry, type) {
		this.initVertexBuffers(this.gl, positionAry, indiceAry);
	}

	stopPlayTimer() {
		if (this.playTimer) {
			clearInterval(this.playTimer);
		}
	}

	/**
	 * 获取breaks
	 *
	 * @param max  value最大值
	 * @param min  value最小值
	 * @param size 分割数
	 */
	getBreaks(max, min, size) {
		let breaks = new Map();
		let step = (max - min) / size;
		breaks.set(0, min);
		for (let i = 1; i < size; i++) {
			breaks.set(i, min + i * step);
		}
		return breaks;
	}

	/**
	 * 查找对应级别的颜色
	 *
	 * @param breaks 级别
	 * @param colors 颜色
	 * @param value  浓度
	 */
	getColor(breaks, colors, value) {
		for (let i = 0; i < breaks.size; i++) {
			let breakValue = breaks.get(i);
			if (value <= breakValue) {
				return colors.get(i);
			}
		}
		return colors.get(colors.size - 1);
	}
}
